<template>
  <div class="soft_manage">
    <div class="manage_title">软件（应用）管理</div>
    <div class="manage_content">
      <div class="added_soft">
        <div class="title">已添加（启用）软件</div>
        <div class="allsoft">
          <div class="every_soft">
            <el-checkbox-group v-model="enableValue">
              <template  v-for="(item,index) in enableSoft">
                <el-checkbox 
                  :key="index"
                  :value="item.id"
                  :label="item.id"
                  >{{item.name}}
                </el-checkbox>
              </template>
          </el-checkbox-group>
          </div>
        </div>
        <div class="enable_btn">
         <el-button type="danger" plain size="mini" @click="handelBtn('stop')">停用</el-button>
        </div>
      </div>
      <div class="not_add_soft">
        <div class="title">未添加（停用）软件</div>
        <div class="allsoft">
          <div class="every_soft">
            <el-checkbox-group v-model="stopValue">
              <template  v-for="(item,index) in stopSoft">
                <el-checkbox 
                  :key="index"
                  :value="item.id"
                  :label="item.id"
                  >{{item.name}}
                </el-checkbox>
              </template>
          </el-checkbox-group>
          </div>
        </div>
        <div class="stop_btn">
          <el-button type="success" plain size="mini" @click="handelBtn('enable')">启用</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
} from "@/api.js"
export default {
  data() {
    return {
      enableSoft: [],
      stopSoft:[],
      enableValue:[],
      stopValue:[]
    };
  },
  created() {
    this.getEnableSoft() //获取已添加的软件
    this.getStopSoft() //获取未添加的软件
  },
  methods: {
    getEnableSoft() {
      this.$api.getCustomAppConfig(
        { data:{name: ""} },
        {
          onSucess: resp => {
            debugger
            console.log(resp)
            this.enableSoft = resp.data.data.datas;
          }
        }
      )
    },
    getStopSoft() {
      this.$api.getUnbindApps(
        {data:{name: "",}},
        {
          onSucess: resp => {
            this.stopSoft = resp.data.data.datas;
          }
        }
      );
    },
    handelBtn(flag) {
      if(flag == 'enable') {
        this.$api.bindCustomApps(
          { data: this.stopValue },
          {
            onSucess: resp => {
              if (resp.data.errcode == 0) {
                this.getStopSoft()
              }
            }
          }
        )
      }else { 
        //停用软件
        this.$api.unbindCustomApps(
          { data:this.enableValue },
          {
            onSucess: resp => {
              debugger
              console.log(resp)
              if(resp.data.errcode == 0) {
                this.getEnableSoft()
              }
            }
          }
        )
      }
    }
  },
};
</script>
<style lang="scss">
 @import '../styles/components/soft_manage.scss';
</style>